<template>
	<view class="order" :class="{'none': noMoreList}">
		<uni-nav-bar :fixed="true" left-icon="back"  :border="false"backgroundColor="#f9f2ea" :statusBar="true" leftText="我的订单" @clickLeft="goBack"></uni-nav-bar>
		<view class="search-box">
			<view class="search">
				<image class="img" src="../../static/search.png" mode=""></image>
				<input class="input" type="text" v-model="keywords" placeholder="搜索关键词" placeholder-style="font-size: 24rpx;color: #ccc" value="" />
				<!-- <input class="input" type="text" v-model="keywords" placeholder="搜索关键词" placeholder-style="font-size: 24rpx;color: #ccc" value="" /> -->
				<view class="delete" v-if="keywords!=''">
					<image class="img" src="../../static/search_delete.png" mode="" @click="deleteSearch"></image>
				</view>
				<view class="search-line"></view>
				<view class="search-btn" @click="toSearch">
					搜索
				</view>
			</view>
			
			<view class="order-type flex">
				<view class="type-box" @click="orderTypeChange('0')">
					<view class="item":class="{'active': orderTypeChoose == 0}" >
						全部
					</view>
				</view>
				<view class="type-box" @click="orderTypeChange('1')">
					<view class="item":class="{'active': orderTypeChoose == 1}" >
						待付款
					</view>
				</view>
				<view class="type-box" @click="orderTypeChange('2')">
					<view class="item":class="{'active': orderTypeChoose == 2}" >
						待发货
					</view>
				</view>
				<view class="type-box" @click="orderTypeChange('3')">
					<view class="item":class="{'active': orderTypeChoose == 3}" >
						待收货
					</view>
				</view>
				<view class="type-box" @click="orderTypeChange('4')">
					<view class="item":class="{'active': orderTypeChoose == 4}" >
						已完成
					</view>
				</view>
			</view>
		</view>
		<view class="search-mark">
			
		</view>
		<view class="goods" v-for="(items, index) in orderArr" :key="index" @click="toDetail(items.id)">
			<view class="good-order-status">
				<view class="">
					订单编号：{{items.order_no}}
				</view>
				<view class="order-status">
					{{getOrderType(items.order_status)}}
				</view>
			</view>
			<!-- @click="toArtworkDetails(item)" -->
			<view class="goods-top flex"  v-for="(item, idx) in items.goods" :key="idx">
				<image   @click.stop="toArtworkDetails(item)" class="img" :src="item.goods_image || item.thumb" mode="aspectFit"></image>
				<view class="goods-top-left">
					<view class="name flex-between">
						<view class="">
							{{item.goods_name || "艺术品"}}
						</view>
					</view>
					<view class="specs flex-between">
						<view class="">
							{{item.goods_spec || ""}}
						</view>
					</view>
					<view class="price-box flex-between">
						<view class="price">
							￥{{item.goods_price || item.art_amount}}
						</view>
						<view class="number">
							× {{item.goods_num || 1}}
						</view>
					</view>
					<!-- <view class="colour">
						颜色
					</view> -->
					<!-- <view class="post">
						包邮
					</view> -->
				</view>
			</view>
			<view class="goods-center">
				<!-- <view class="coupon flex-between" v-if="items.coupon_amount != 0">
					<view class="">
						优惠券减免
					</view>
					<view class="">
						{{items.coupon_amount}}
					</view>
				</view> -->
				<view class="flex amount">
					<view class="text">
						总价：
					</view>
					<view class="price">
						￥{{items.goods_amount}}
					</view>
				</view>
				<view class="flex payable" v-if="items.order_status != -1">
					<view class="">
						{{items.order_status == 1 ? "需付款：" : "实付款："}}
					</view>
					<view class="price">
						￥{{items.order_amount}}
						<text class="freight" v-show="items.logistics_amount != '0.00'">（含运费：￥{{items.logistics_amount}}）</text>
					</view>
				</view>
			</view>
			<view class="goods-bottom">
				<!-- <view class="details btn" @click="toDetail(items.id)">
					订单详情
				</view> -->
				<view class="btn appraise" v-show="items.order_status == 3" @click.stop="confirm(items, index)">
					确认收货
				</view>
				<view class="delete btn" v-show="items.order_status == 2" @click.stop="refund(items, index)">
					退款
				</view>
				<view class="delete btn" v-show="items.order_status == 1" @click.stop="cancel(items, index)">
					取消
				</view>
				<view class="delete btn" v-show="items.order_status == 5 || items.order_status == 6 || items.order_status == -1" @click.stop="deleteOrder(items, index)">
					删除
				</view>
				<!-- <view class="appraise btn" v-show="items.order_status == 4">
					评价
				</view> -->
				<view class="appraise btn" v-show="items.order_status == 1" @click.stop="payNow(items.id)">
					付款
				</view>
			</view>
		</view>
		<view class="nomore" v-if="noMoreList">
			<!-- <image class="haveno" src="../../static/order_none.png" mode=""></image> -->
			<view>暂无数据</view>
		</view>
		<uni-load-more v-show="loadMoreShow" :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import { orderList, payOrder, delOrder, cancelOrder, refundOrder, confirmOrder } from "@/api/public.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data(){
			return {
				orderTypeChoose: 0,
				keywords: "",
				orderArr: [],
				loadMoreShow: false,
				loadMoreStatus: "more",
				noMoreList: false,
				page: 1,
			}
		},
		created(){
			this.getList();
		},
		show(){
			this.getList();
		},
		watch: {
			keywords(){
				this.page = 1;
				this.orderArr = [];
				this.getList();
			},
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			toSearch(){
				this.page = 1;
				this.orderArr = [];
				this.getList();
			},
			deleteSearch(){
				this.keywords = "";
				 console.log(this.keywords)
			},
			orderTypeChange(type){
				this.orderTypeChoose = type;
				this.page = 1;
				this.orderArr = [];
				this.getList();
			},
			getList(){
				orderList(this.page, this.orderTypeChoose, this.keywords).then(res=>{
					if(this.page==1){
						if(!res.reData.data || res.reData.data.length == 0){
							this.noMoreList = true
						}else{
							this.noMoreList = false
							this.showLoadMore = true
						}
					}
					if (res.reData.data) {
						let newData = res.reData.data;
						this.orderArr = this.orderArr.concat(newData);
						if(res.reData.data.length < 10){
							this.loadMoreStatus = 'noMore';
						}else{
							this.loadMoreStatus = 'more';
						}
					}
				})
			},
			toArtworkDetails(item){
				console.log(item)
				if(item.goods_type == 1){
					uni.navigateTo({
						url: "../index/artWorkDetails?id=" + item.goods_id
					})
				}else{
					uni.navigateTo({
						"url": "../hypermarket/artDetails?id=" + item.goods_id
					})
				}
			},
			toDetail(id){
				uni.navigateTo({
					url: "orderDetails?id=" + id
				})
			},
			payNow(id){
				payOrder(id).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						appid: res.reData.data.appId,
						timeStamp: ""+res.reData.data.timeStamp,
						nonceStr: res.reData.data.nonceStr,
						package: res.reData.data.package,
						signType: res.reData.data.signType,
						paySign: res.reData.data.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							uni.redirectTo({
								url: "/pages/mine/order"
							})
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			deleteOrder(item, index){
				uni.showModal({
					title: '提示',
					content: '是否删除订单',
					success: (res)=>{
						if (res.confirm) {
							delOrder(item.id).then(res=>{
								if(res.result == 0){
									this.orderArr.splice(index, 1);
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancel(item, index){
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: (res)=>{
						if (res.confirm) {
							cancelOrder(item.id).then(res=>{
								if(res.result == 0){
									this.orderArr.splice(index, 1);
									uni.showToast({
										title: "取消成功",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			refund(item, index){
				uni.showModal({
					title: '提示',
					content: '是否确认退款',
					success: (res)=>{
						if (res.confirm) {
							refundOrder(item.id).then(res=>{
								if(res.result == 0){
									if(this.orderTypeChoose == 0){
										item.order_status = -1
									}else{
										this.orderArr.splice(index, 1);
									}
									uni.showToast({
										title: "已提交申请",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirm(item, index){
				confirmOrder(item.id).then(res=>{
					if(res.result == 0){
						if(this.orderTypeChoose == 0){
							item.order_status = 4
						}else{
							this.orderArr.splice(index, 1);
						}
						uni.showToast({
							title: "确认收货",
							icon: "none"
						})
					}
				})
			},
		},
		components: {
			uniLoadMore
		},
		computed: {
			getOrderType(){
				return function(type){
					let str = "";
					switch(type){
						case 1: str = "待付款";
						break;
						case 2: str = "待发货";
						break;
						case 3: str = "待收货";
						break;
						case 4: str = "待评价";
						break;
						case 5: str = "已完成";
						break;
						case 6: str = "已退款";
						break;
						case -1: str = "已取消";
						break;
					}
					return str
				}
			},
		},
		//上拉加载
		onReachBottom() {
			this.loadMoreStatus = 'loading';
			this.showLoadMore = true
			if (this.page * 10 == this.orderArr.length) {
				this.page++
				this.getList()
			} else {
				this.loadMoreStatus = 'noMore'; //没有数据时显示‘没有更多’
			}
		},
	}
</script>

<style lang="scss" scoped>
.search-mark{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	width: 690rpx;
	height: 170rpx;
}
.search-box{
	position: fixed;
	z-index: 1000;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: #f9f2ea;
}
.search{
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
	width: 660rpx;
	height: 80rpx;
	background: #fffaf5;
	border-radius: 40rpx;
	padding-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.img{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
	.input{
		width: 480rpx;
		padding-left: 70rpx;
	}
	.delete{
		position: absolute;
		right: 140rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 10000;
		.img{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.search-line{
		height: 30rpx;
		width: 2rpx;
		background-color: #e9e9e9;
	}
	.search-btn{
		width: 100rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 80rpx;
		margin-right: 20rpx;
	}
}
.order{
	&.none{
		height: 100%;
	}
}
.nav{
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-bottom: 10rpx;
	.nav-box{
		width: 50%;
	}
	.nav-item{
		box-sizing: border-box;
		width: 100rpx;
		margin: 0 auto;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		&.active{
			color: #d12a3e;
			border-bottom: 6rpx solid #d12a3e;
		}
	}
}
.order-type{
	width: 100%;
	.type-box{
		width: 20%;
		.item{
			height: 60rpx;
			line-height: 60rpx;
			color: rgba(84, 54, 54, 1);
			font-size: 32rpx;
			text-align: center;
			&.active{
				color: rgba(207, 126, 109, 1);
			}
		}
	}
}
.goods{
	width: 640rpx;
	margin: 0 auto 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);
	background: rgba(255, 250, 245, 1);
	.good-order-status{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		line-height: 30rpx;
		color: rgba(166, 166, 166, 1);
		border-bottom: 2rpx solid #eee;
		padding: 0 0 20rpx;
		margin-bottom: 20rpx;
		.order-status{
			color: 	rgba(240, 116, 91, 1);
		}
	}
	.goods-top{
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
		.img{
			width: 160rpx;
			height: 160rpx;
			margin-right: 30rpx;
			flex-shrink: 0;
		}
		.goods-top-left{
			flex-grow: 1;
			.name{
				font-size: 28rpx;
				line-height: 30rpx;
				color: rgba(84, 54, 54, 1);
				margin-bottom: 20rpx;
				.price{
					font-weight: 400;
					color: #d6323b;
				}
			}
			.specs{
				padding: 8rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: rgba(212, 148, 135, 1);
				margin-bottom: 20rpx;
				background-color: rgba(249, 242, 234, 1);
			}
			.colour{
				font-size: 24rpx;
				line-height: 24rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
			.post{
				font-size: 22rpx;
				line-height: 22rpx;
				color: #ccc;
				margin-bottom: 20rpx;
			}
			.price-box{
				color: rgba(214, 142, 127, 1);
				.price{
					font-size: 36rpx;
					font-weight: 700;
				}
				.number{
					font-size: 26rpx;
				}
			}
		}
	}
	.goods-center{
		padding-bottom: 20rpx;
		line-height: 60rpx;
		color: #666;
		font-size: 26rpx;
		display: flex;
		justify-content: flex-end;
		.flex{
			margin-left: 20rpx;
		}
		.amount{
			.text{
				color: rgba(128, 128, 128, 1);
				font-size: 24rpx;
				line-height: 56prx;
			}
			.price{
				color: rgba(166, 166, 166, 1);
				font-size: 36rpx;
				line-height: 56rpx;
				font-weight: 700;
			}
		}
		.payable{
			.text{
				color: rgba(84, 54, 54, 1);
				font-size: 24rpx;
				line-height: 56prx;
			}
			.price{
				color: rgba(214, 142, 127, 1);
				font-size: 36rpx;
				line-height: 56rpx;
				font-weight: 700;
				.freight{
					color: rgba(84, 54, 54, 1);
					font-size: 24rpx;
					line-height: 56prx;
				}
			}
		}
		.coupon{
			font-size: 24rpx;
			line-height: 24rpx;
			color: #d6323b;
		}
		.price{
			color: rgba(166, 166, 166, 1);
			.text{
				color: #ccc;
			}
		}
	}
	.goods-bottom{
		padding-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		.btn{
			width: 120rpx;
			height: 46rpx;
			border-radius: 24rpx;
			border: 2rpx solid  rgba(128, 128, 128, 1);;
			text-align: center;
			color: rgba(128, 128, 128, 1);
			font-size: 22rpx;
			line-height: 44rpx;
			margin-left: 50rpx;
			box-shadow: 10rpx 10rpx 20rpx rgba(189, 185, 166, 0.5);
		}
		// .delete{
		// 	color: #fdb431;
		// }
		.appraise{
			color: rgba(214, 142, 127, 1);
			border: 2rpx solid  rgba(214, 142, 127, 1);;
		}
	}
}
.nomore{
	text-align: center;
	.haveno{
		margin: 0 auto;
	}
}
</style>
